<section class="s-stage">
  <div class="row">
    <div class="column small-12 large-7 xlarge-6 content">
      <h1 class="title-1 green"><img src="/assets/img/logo.svg" alt="Luigi" />Luigi</h1>
      <h1 class="title-1">The Enterprise-Ready Micro Frontend Framework</h1>
      <a class="btn-primary" href="https://docs.luigi-project.io/docs/getting-started"
        >GET STARTED</a
      >
      <a
        href="https://fiddle.luigi-project.io"
        target="_blank"
        rel="noopener noreferrer"
        class="btn-secondary show-for-large"
      >
        Test playground
      </a>
    </div>
    <div class="column small-12 large-6 image">
      <a
        href="https://fiddle.luigi-project.io"
        target="_blank"
        rel="noopener noreferrer"
        class="play-button hide-for-large"
      ></a>
    </div>
  </div>
</section>

<section class="s-intro s-gradient s-gradient--right-left is-centered">
  <div class="wr">
    <div class="row align-center">
      <div class="column small-12 large-8 xlarge-6">
        <div class="sub-title has-number">
          <span class="text">Introducing Luigi</span>
        </div>
        <h2 class="title-2">
          Luigi helps you to build modularizable, extensible, scalable and consistent UIs
          and Web Apps.
        </h2>
        <p>
          Create a unified user experience around your complex functionality in a
          distributed development environment.
        </p>
        <p>
          <a class="btn-primary" href="/about">Read more</a>
        </p>
      </div>
    </div>
  </div>
</section>

<section class="s-benefits">
  <div class="row">
    <div class="column small-12 large-6">
      <div class="sub-title has-number"><span class="text">Benefits</span></div>
      <div class="title-2">
        Build administration and business User Interfaces using Luigi and discover its
        benefits.
      </div>
    </div>
  </div>

  <ul class="benefits-list">
    <li class="item">
      <div class="row">
        <div class="column small-12 large-6 content">
          <h3 class="title-3">Modular</h3>
          <p class="description">
            Decompose your monolithic web applications into a set of consistent and clear
            UI modules reflecting their underlying backend modularity.
          </p>
        </div>
        <div class="column small-12 large-6 image">
          <img
            src="/assets/img/modular.svg"
            alt="Luigi - Micro Frontend Framework - Modular"
          />
        </div>
      </div>
    </li>

    <li class="item">
      <div class="row">
        <div class="column small-12 large-6 content">
          <h3 class="title-3">Extensible</h3>
          <p class="description">
            Seamlessly integrate UI modules from external systems and build applications
            that can be extended with additional functionality from your customer or a 3rd
            party vendor in a secure way.
          </p>
        </div>
        <div class="column small-12 large-6 image">
          <img
            src="/assets/img/extensible.svg"
            alt="Luigi - Micro Frontend Framework - Extensible"
          />
        </div>
      </div>
    </li>

    <li class="item">
      <div class="row">
        <div class="column small-12 large-6 content">
          <h3 class="title-3">Scalable</h3>
          <p class="description">
            Divide and distribute the development of end-to-end features to an arbitrary
            number of teams, who can then independently and rapidly develop, deploy,
            maintain and operate their solutions.
          </p>
        </div>
        <div class="column small-12 large-6 image">
          <img
            src="/assets/img/scalable.svg"
            alt="Luigi - Micro Frontend Framework - Scalable"
          />
        </div>
      </div>
    </li>

    <li class="item">
      <div class="row">
        <div class="column small-12 large-6 content">
          <h3 class="title-3">Technology agnostic</h3>
          <p class="description">
            Technologies change often. You never know, if a technology you've chosen
            today, will be outdated in a year. Luigi is technology agnostic and allows you
            to react to new trends quickly preventing technology lock-ins.
          </p>
        </div>
        <div class="column small-12 large-6 image">
          <img
            src="/assets/img/agile.svg"
            alt="Luigi - Micro Frontend Framework - Technology agnostic"
          />
        </div>
      </div>
    </li>
  </ul>
</section>

<section class="s-adopters is-centered">
  <div class="row align-center">
    <div class="column small-12 large-8 xlarge-6">
      <div class="sub-title has-number">
        <span class="text">Early adopters</span>
      </div>
      <h2 class="title-2 has-big-margin">From startups to the largest companies</h2>
    </div>
  </div>
  <div class="row">
    <div class="column small-12">{{> whoisusingluigi}}</div>
  </div>
</section>

<section class="s-gradient has-big-bottom-margin">
  <div class="row">
    <div class="column small-12 large-6 content">
      <div class="sub-title has-number">
        <span class="text">Our Youtube Channel</span>
      </div>
      <h3 class="title-3">Get the latest from Luigi</h3>
      <p class="description">
        Always stay up to date with our growing collection of news, innvovations and video
        tutorials.
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          class="btn-primary"
          href="https://www.youtube.com/channel/UC5WsYsHapDlg2K3iXS4n4AQ"
          >Browse Channel</a
        >
      </p>
    </div>
    <div class="column small-12 large-6 image">
      <img src="/assets/img/youtube.svg" alt="Luigi - Our Youtube Channel - Youtube" />
    </div>
  </div>
</section>
